<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn1">alert</button>
    <button id="btn2">confirm</button>
    <button id="btn3">prompt</button>
    <script>
        //本节其实了解一下就好，目前的开发很少用了。一个原因是本来就不方便也不美观，其次会阻塞js的加载，js是一门单线程语言，一旦被阻塞，后面的代码就没法执行。所以基本不会用到，除非调试bug的时候

        let btn1 = document.getElementById('btn1')
        let btn2 = document.getElementById('btn2')
        let btn3 = document.getElementById('btn3')

        //alert，警告框
        btn1.onclick = ()=>{
            alert('btn1')
        }

        /*
            confirm，询问框.
            不同于alert，confirm是会返回一个值的。因为confirm的询问框会有两个选项：确认、取消。
            如果用户点击取消则会返回false、反之返回true
            所以我们可以根据返回值来判断是否需要进行一些操作。比如"您确定要...吗?",如果用户点击了确认，则会返回true，那么这个时候我们可以利用这个true进行操作
        */
        btn2.onclick = ()=>{
            let res = confirm('我知道你点了什么?')
            if(res){
                alert('你点了确认')
            }else{
                alert('你点了取消')
            }
        }

        /*
            prompt，输入框
            页面中会弹出一个输入框，你输入的东西会通过这个方法返回回来。
        */
        btn3.onclick = ()=>{
            let res = prompt('请输入...')
            alert(`您输入了${res}`)
        }
    </script>
</body>
</html>